<template>
	<view>
		<view v-for="(item, index) in groupMembers" :key="item.userId">
			<view class="rowItem">
				<image :src="item.userPhoto" class="leftImg"></image>
				<text class="text" v-text="item.userNickname"></text>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		computed: {
			...mapState(['currentChatFrame']),
			groupMembers() {
				return this.currentChatFrame.groupMembers
			}
		}
	}
</script>

<style>
	.leftImg {
	    height: 45px;
	    width: 45px;
	    border-radius: 5px;
	    margin-right: 20px;
	}
	
	.rowItem {
	    padding: 10px;
	    border: 1px solid #eee;
	    background-color: white;
	    display: flex;
	}
	
	.text {
	    line-height: 45px;
	}
</style>
